<div id="subHeader">
	<div class="container-fluid">
		<div ng-class="{'row': $root.user.id != match.admin.id, 'row no-bottom-margin': $root.user.id == match.admin.id}">
			<div class="col-md-3">
				<p class="img-container md"><img src="{{match.admin.photo_url}}" /></p>
				<p>{{match.admin.name}} {{match.admin.lastname}}</p> 
				<p ng-if="$root.user.id == match.admin.id"><a class="green" href="javascript: return false;" data-toggle="modal" data-target="#editMatchModal"><span class="glyphicon glyphicon-pencil green"></span> Editar partido</a></p>
			</div>
			<div class="col-md-3">
				<i class="fa fa-futbol-o fa-4x white"></i>
				<h2>{{match.type.name}}</h2>
				<p>Faltan {{match.type.totalPlayers - (teamA.team.users.length) - (teamB.team.users.length)}} de {{match.type.totalPlayers}}</p>
			</div>
			<div class="col-md-3">
				<i class="fa fa-clock-o fa-4x white"></i>
				<h2>{{match.date | dateFormat:'dddd D [de] MMMM'}}</h2>
				<p>{{match.date | dateFormat:'HH:mm'}}hs</p>
			</div>
			<div class="col-md-3">
				<i class="fa fa-group fa-4x white"></i>
				<h2>{{match.field.name}}</h2>
				<p>{{match.field.town}}</p>
			</div>
		</div>
		
		<div ng-if="$root.user.id != match.admin.id" class="row">
			<div class="col-md-6">
				<div id="answerYesButton" class="button full text-center" ng-class="{'button-green': userConfirmed == null || userConfirmed == 1, 'button-lightGray': userConfirmed != null && userConfirmed == 0}" ng-click="answerYes()">
					<div><span class="glyphicon glyphicon-ok"  ng-class="{'darkYellow': userConfirmed == null || userConfirmed == 1, 'gray': userConfirmed != null && userConfirmed == 0}"></span> me anoto</div>
				</div>
			</div>
			<div class="col-md-6">
				<div id="answerNoButton" class="button full text-center" ng-class="{'button-orange': userConfirmed == null || userConfirmed == 0, 'button-lightGray': userConfirmed != null && userConfirmed == 1}" ng-click="answerNo()">
					<div><span class="glyphicon glyphicon-remove"  ng-class="{'darkOrange': userConfirmed == null || userConfirmed == 0, 'gray': userConfirmed != null && userConfirmed == 1}"></span> me duele la panza</div>
				</div>
			</div>
		</div>
	</div>
</div>
	
<div class="container-fluid">
	<div id="match">
		<div ng-if="$root.user.id == match.admin.id" class="row">
			<div class="col-md-8 text-left">
				<div id="matchShare" class="row no-bottom-margin bordered">
					<div class="col-md-1">
						<p><b>Link</b></p>
					</div>
					<div id="shareUrl" class="col-md-5 bordered no-top no-bottom">
						<input type="text" readonly="readonly" value="http://{{currentURL}}?token={{match.token}}" select-on-click />
					</div>
					<div id="shareFB" class="shareLink col-md-2 bordered no-top no-bottom no-left" ng-click="shareFB()">
						<p>FB</p>
					</div>
					<div id="shareTW" class="shareLink col-md-2 bordered no-top no-bottom no-left" ng-click="shareTW()">
						<p>TW</p>
					</div>
					<div id="shareWAPP" class="shareLink col-md-2">
						<a href="whatsapp://send" data-text="Copate un fulbo!" data-href="http://{{currentURL}}?token={{match.token}}" class="wa_btn wa_btn_m" style="display:none">WhatsApp</a>
					</div>
				</div>
			</div>
			<div class="col-md-4 text-right">
				<div id="inviteButton" class="button button-green full text-center" data-toggle="modal" data-target="#invitePlayersModal">
					<div><span class="glyphicon glyphicon-bullhorn darkYellow"></span> invitar jugadores</div>
				</div>
			</div>
		</div>
	
		<div class="row">
			<div class="col-md-12 text-left">
				<span class="glyphicon glyphicon-ok green"></span> <h2 style="display: inline-block;"> Confirmados <small>(Los que importan)</small></h2>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-6">
				<div class="row">
					<div ng-class="{'col-md-12': modoVersus, 'col-md-6': !modoVersus}">
						<div id="teamA" style="background-color: {{teamA.team.shirtColor}}; color: {{(teamA.team.shirtColor == '#FFFFFF' || teamA.team.shirtColor == '#fff')?'black':'white'}};" class="team">A</div>
						<div ng-repeat="player in teamA.team.users">
							<div class="player-item" style="border-color: {{teamA.team.shirtColor}};">
								<div class="col-md-4 img-container sm"><img src="{{player.photo_url}}" /></div>
								<div class="col-md-8">{{player.name}} {{player.lastname}}</div>
							</div>
						</div>
						<div ng-if="$root.user.id == match.admin.id" ng-mouseenter="tooltipA = true" ng-init="tooltipA = false" ng-repeat="i in getNumber(teamA.missingPlayers) track by $index" ng-click="changeSelectedTeam('A')" data-toggle="modal" data-target="#addPlayerModal" class="player-item empty">
							<p ng-show="tooltipA">Agregar a mano a un amigo</p>
						</div>
						<div ng-if="$root.user.id != match.admin.id" ng-repeat="i in getNumber(teamA.missingPlayers) track by $index" class="player-item empty" style="cursor: auto;"></div>
					</div>
					<div class="col-md-6" ng-if="!modoVersus">
						<div id="teamB" style="background-color: {{teamB.team.shirtColor}}; color: {{(teamB.team.shirtColor == '#FFFFFF' || teamB.team.shirtColor == '#fff')?'black':'white'}};" class="team">B</div>
						<div ng-repeat="player in teamB.team.users">
							<div class="player-item" style="border-color: {{teamB.team.shirtColor}};">
								<div class="col-md-4 img-container sm"><img src="{{player.photo_url}}" /></div>
								<div class="col-md-8">{{player.name}} {{player.lastname}}</div>
							</div>
						</div>
						<div ng-if="$root.user.id == match.admin.id" ng-repeat="i in getNumber(teamB.missingPlayers) track by $index" ng-click="changeSelectedTeam('B')" data-toggle="modal" data-target="#addPlayerModal" class="player-item empty"></div>
						<div ng-if="$root.user.id != match.admin.id" ng-repeat="i in getNumber(teamB.missingPlayers) track by $index" class="player-item empty" style="cursor: auto;"></div>
					</div>
				</div>
				
				<div class="row">
					<div class="col-md-12 text-left">
						<span class="glyphicon glyphicon-time green"></span> <h2 style="display: inline-block;"> Suplentes <small>(Te duermen el lugar si dudás)</small></h2>
					</div>
				</div>
				<div class="row">
					<div ng-repeat="player in subs" class="col-md-6">
						<div class="player-item">
							<div class="col-md-4 img-container sm"><img src="{{player.photo_url}}" /></div>
							<div class="col-md-8">{{player.name}} {{player.lastname}}</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="player-item empty"></div>
					</div>
					<div class="col-md-6">
						<div class="player-item empty"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div id="playersMissing" class="bordered">
						<div ng-mouseenter="showTeamAColors = true" ng-init="showTeamAColors=false" style="background-color: {{teamA.team.shirtColor}};" class="shirt col-md-2 bordered no-bottom no-top no-left">&nbsp;</div>
						<div class="shirt-options left">
							<div ng-mouseleave="showTeamAColors =! showTeamAColors" ng-show="showTeamAColors">
							<div class="row no-bottom-margin">
								<div class="shirt-option col-md-4" style="background-color: #FFC926;" ng-click="setTeamAColor('#FFC926')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #FB9610;" ng-click="setTeamAColor('#FB9610')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #FF5C26;" ng-click="setTeamAColor('#FF5C26')">
								</div>
							</div>
							<div class="row no-bottom-margin">
								<div class="shirt-option col-md-4" style="background-color: #DADA00;" ng-click="setTeamAColor('#DADA00')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #00BBF5;" ng-click="setTeamAColor('#00BBF5')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #B973FF;" ng-click="setTeamAColor('#B973FF')">
								</div>
							</div>
							<div class="row no-bottom-margin">
								<div class="shirt-option col-md-4" style="background-color: #FFFFFF;" ng-click="setTeamAColor('#FFFFFF')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #444444;" ng-click="setTeamAColor('#444444')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #DDDDDD;" ng-click="setTeamAColor('#DDDDDD')">
								</div>
							</div>
							</div>
						</div>
						<div class="bar"  ng-class="{'col-md-10': modoVersus, 'col-md-8': !modoVersus}">
							<div class="table">
								<div class="table-cell">
									<div class="back-bar">
										<div class="progress-bar" style="width: {{100 - (match.type.totalPlayers - teamA.team.users.length - teamB.team.users.length)/match.type.totalPlayers*100}}%;">&nbsp;</div>
										<div class="progress-bar-after" style="width: {{100 - (match.type.totalPlayers - teamA.team.users.length - teamB.team.users.length)/match.type.totalPlayers*100 + 5}}%;">&nbsp;</div>
										<div class="text">Faltan {{match.type.totalPlayers - (teamA.team.users.length) - (teamB.team.users.length)}} de {{match.type.totalPlayers}}</div>
									</div>	
								</div>
							</div>
						</div>
						<div ng-show="!modoVersus" ng-mouseenter="showTeamBColors = true" ng-init="showTeamBColors=false" style="background-color: {{teamB.team.shirtColor}};" class="shirt col-md-2 bordered no-bottom no-top no-right">&nbsp;</div>
						<div ng-show="!modoVersus" class="shirt-options right">
							<div ng-mouseleave="showTeamBColors =! showTeamBColors" ng-show="showTeamBColors">
							<div class="row no-bottom-margin">
								<div class="shirt-option col-md-4" style="background-color: #FFC926;" ng-click="setTeamBColor('#FFC926')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #FB9610;" ng-click="setTeamBColor('#FB9610')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #FF5C26;" ng-click="setTeamBColor('#FF5C26')">
								</div>
							</div>
							<div class="row no-bottom-margin">
								<div class="shirt-option col-md-4" style="background-color: #DADA00;" ng-click="setTeamBColor('#DADA00')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #00BBF5;" ng-click="setTeamBColor('#00BBF5')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #B973FF;" ng-click="setTeamBColor('#B973FF')">
								</div>
							</div>
							<div class="row no-bottom-margin">
								<div class="shirt-option col-md-4" style="background-color: #FFFFFF;" ng-click="setTeamBColor('#FFFFFF')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #444444;" ng-click="setTeamBColor('#444444')">
								</div>
								<div class="shirt-option col-md-4" style="background-color: #DDDDDD;" ng-click="setTeamBColor('#DDDDDD')">
								</div>
							</div>
							</div>
						</div>
				</div>
				<div id="fieldScheme" ng-mouseleave="showTeamBColors = false; showTeamAColors = false;">
					<div ng-repeat="player in teamA.team.users" class="player-badge img-container sm" style="border-color: {{teamA.team.shirtColor}}; top: {{teamA.positions[$index].y}}; left: {{teamA.positions[$index].x}};"><img src="{{player.photo_url}}" /></div>
					<div ng-repeat="i in getNumber(teamA.missingPlayers) track by $index" class="player-badge empty" style="background-color: {{teamA.team.shirtColor}}; border-color: {{teamA.team.shirtColor}}; top: {{teamA.positions[$index + teamA.team.users.length].y}}; left: {{teamA.positions[$index + teamA.team.users.length].x}};"></div>
					<div ng-repeat="player in teamB.team.users" class="player-badge img-container sm" style="border-color: {{teamB.team.shirtColor}}; top: {{teamB.positions[$index].y}}; left: {{teamB.positions[$index].x}};"><img src="{{player.photo_url}}" /></div>
					<div ng-repeat="i in getNumber(teamB.missingPlayers) track by $index" class="player-badge empty" style="background-color: {{teamB.team.shirtColor}}; border-color: {{teamB.team.shirtColor}}; top: {{teamB.positions[$index + teamB.team.users.length].y}}; left: {{teamB.positions[$index + teamB.team.users.length].x}};"></div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-8  text-left">
				<span class="glyphicon glyphicon-comment green"></span> <h2 style="display: inline-block;"> La previa <small>(Calentala o mangueá unos botines)</small></h2>
			</div>
			<div class="col-md-4  text-left">
				<span class="glyphicon glyphicon-time green"></span> <h2 style="display: inline-block;"> Sede <small>(La arena de batalla)</small></h2>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-8">
				<div id="fbCommentBox" class="row bordered no-bottom-margin">
					<div id="fb-comment-box" dyn-fb-comment-box page-href="{{currentURL}}" numposts="5" colorscheme="light"></div>
				</div>
			</div>
			<div class="col-md-4">
				<div>
					<div id="fieldData" class="row bordered no-bottom">
						<h4>{{match.field.name}}</h4>
						<p>
							{{match.field.address}}<br/>
							{{match.field.town}}<br/>
							{{match.field.state}}<br/>
							{{match.field.country}}
						</p>
						<p class="orange">{{match.field.contact}}</p>
					</div>
					<div id="map_canvas" class="bordered no-top">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="editMatchModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center h600">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<div class="row no-bottom-margin">
        				<div class="col-md-4">
							<i class="fa fa-futbol-o fa-4x"></i>
							<h3>Jugadores</h3>
							<select id="matchEditType" name="txt_inc_Status" class="form-control input-lg" required ng-model="match.matchTypeId">
								<option selected disabled>
									Número de jugadores
								</option>
							    <option ng-repeat="matchType in $root.matchTypes" value="{{matchType.id}}">
							    	{{matchType.name}}
								</option>
							</select>
							<p>Elegí que tipo de fulbito<br/>querés armar.</p>
						</div>
						<div class="col-md-4">
							<i class="fa fa-group fa-4x"></i>
							<h3>Sede</h3>
							<select id="matchEditField" name="txt_inc_Status" class="form-control input-lg" required ng-model="match.fieldId">
								<option selected disabled>
									Dónde se juega
								</option>
							    <option ng-repeat="field in $root.fields" value="{{field.id}}">
							    	{{field.name}}
								</option>
							</select>
							<p>Completá con datos para que los<br/>jugadores lleguen.</p>
						</div>
						<div id="time" class="col-md-4">
							<i class="fa fa-clock-o fa-4x"></i>
							<h3>Fecha y Horario</h3>
							<div id="timeSelectors">
								<input id="matchEditDate" type="text"
				                   class="form-control input-lg"
				                   data-date-time-picker
				                   data-language="{{es}}"
				                   data-pick12HourFormat="false"
				                   data-date-format="DD/MM/YYYY"
				                   data-date-pickTime="false"
				                   data-use-current="{{false}}"
				                   placeholder="Elegí el día" value="{{match.date | dateFormat:'DD/MM/YYYY'}}"
				                    />
								<input id="matchEditHour" type="time" class="form-control input-lg" placeholder="Horario" value="{{match.date | dateFormat:'HH:mm'}}">
							</div>
							<p>Antes de cerrar la fecha y hora,<br/>confirmá con tu cancha.</p>
						</div>
					</div>
					<div class="row no-bottom-margin bordered no-left no-right no-bottom">
						<div class="col-md-6 text-left">
							<a ng-click="cancelMatch()" class="gray" href="#" data-toggle="modal" data-target="#editMatchModal"><span class="glyphicon glyphicon-remove gray"></span> Cancelar partido</a>
						</div>
						<div class="col-md-6">
							<div id="updateMatchButton" class="button button-green medium" ng-click="updateMatch()">
								<div><span class="glyphicon glyphicon-ok darkYellow"></span> guardar</div>
							</div>
						</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div id="invitePlayersModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center h630">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<div class="row no-bottom-margin no-side-margin">
        				<div class="col-md-12">
		        			<h2 class="darkGray no-margin">Convocá jugadores</h2>
							<h4 class="darkGray">Elegí amigos de tus listas para invitarlos al <b>fulbo</b> que armaste</h4>
							<p style="margin: 2.1rem auto; width: 38rem;">
								<input id="newGroupName" type="text" class="form-control" placeholder="Buscá por nombre de amigo o lista" required  ng-model="invitePlayersQuery" />
							</p>
						</div>
					</div>
					<div class="row friends-list no-side-margin">
						<div class="row no-side-margin">
							<div class="col-md-12"><h4 class="darkGray text-left">Listas de amigos</h4></div>
							<div ng-repeat="group in groups.Member | filter:invitePlayersQuery" class="col-md-4" ng-click="selectGroup(group)">
	        					<div class="group" ng-class="{'selected' : isSelected(group)}">
									<div class="photo img-container sm"><img src="{{ group.image }}" /></div>
	        						<div class="name">{{ group.name }}</div>
								</div> 
	        				</div>
        				</div>
        				<div class="row no-side-margin">
        					<div class="col-md-12"><h4 class="darkGray text-left">Mis amigos de Facebook</h4></div>
							<div ng-repeat="friend in friends | filter:invitePlayersQuery" class="col-md-4" ng-click="selectFriend(friend)">
								<div class="friend" ng-class="{'selected' : isSelected(friend)}">
									<div class="photo img-container sm"><img src="https://graph.facebook.com/{{ friend.id }}/picture" /></div>
		        					<div class="name">{{ friend.name }}</div>
								</div>
	        				</div>
        				</div>
					</div>	
					<div class="row no-side-margin">
        				<div class="col-md-6 text-left">
							<h4 class="darkGray">Seleccionaste <font class="green">{{ friendsSelected.length }}</font> amigos</h4>
						</div>
        				<div class="col-md-6">
		        			<div id="invitePlayersButton" class="button button-green medium" ng-click="invitePlayers()">
								<div><span class="glyphicon glyphicon-bullhorn darkYellow"></span> invitar</div>
							</div>
						</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div id="addPlayerModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<div class="row">
        				<div class="col-md-12">
		        			<h2 class="darkGray no-margin">Agregá manualmente un jugador</h2>
							<h4 class="darkGray">Te confirmaron que juegan, pero no pueden anotarse</h4>
							<p style="margin: 2.1rem auto; width: 38rem;">
								<input id="newPlayerName" type="text" class="form-control" placeholder="Ingresá el nombre" required />
							</p>
							<div id="addPlayerButton" class="button button-green medium" ng-click="addPlayer()">
								<div><span class="glyphicon glyphicon-ok darkYellow"></span> agregar</div>
							</div>
						</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<script type="text/javascript">
		(function(){
			$('#shareUrl input').click(function(e) {
			    $(this).focus().select();  
			});
		})();
	</script>